<template>
    <div class="screen_box flexbox flexcolumn">
        <div class="screen_head">
            <img src="../../assets/img/screen_head.svg" alt="" class="screen_img">
            <div class="cc_box cc_left">
                <img src="../../assets/img/big_cc.svg" alt="" class="big_cc">
                <img src="../../assets/img/small_cc.svg" alt="" class="small_cc">
            </div>
            <div class="cc_box cc_right">
                <img src="../../assets/img/big_cc.svg" alt="" class="big_cc">
                <img src="../../assets/img/small_cc.svg" alt="" class="small_cc">
            </div>
        </div>
        <div class="screen_content flex flexbox flexcolumn">
            <div class="screen_btn flexbox flexcenter">
                <div class="screen_item" :class="{'active':type=='stat_cost'}" @click="selectType('stat_cost')">总消耗</div>
                <div class="screen_item" :class="{'active':type=='stat_cost_qcvideo'}" @click="selectType('stat_cost_qcvideo')">千川短视频</div>
                <div class="screen_item" :class="{'active':type=='stat_cost_qclive'}" @click="selectType('stat_cost_qclive')">千川直播</div>
            </div>
            <div class="flex">
                <div id='dirBarchart' style="height:100%;"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            screenWidth: document.documentElement.clientWidth,
            data:[],
            x_data:[],
            y_data:[],
            type:"stat_cost",
            timer:null,
        };
    },
    created() {
        
    },
    mounted() {
        var that = this;
        window.addEventListener("resize", function () {
            that.screenWidth = document.body.offsetWidth;
        });
        document.getElementsByTagName("html")[0].style.fontSize =
            this.screenWidth / 20 + "px";
        this.type = window.sessionStorage.getItem('launchVedio') ? window.sessionStorage.getItem('launchVedio'):'stat_cost'
        this.data = JSON.parse(this.$route.query.data) 
        this.y_data = this.data.map(item=>{return item.nickname})
        this.x_data = this.data.map(item=>{return item[that.type]})
        that.getScreenEchart();
    },
    watch: {
        screenWidth: function (val) {
            document.getElementsByTagName("html")[0].style.fontSize =
                val / 20 + "px";
        },
    },
    beforeDestroy() {
        document.getElementsByTagName("html")[0].style.fontSize = "unset";
        window.sessionStorage.removeItem("launchVedio");
    },
    methods: {
        selectType(type){
            this.type = type
            this.data = this.data.sort(
                this.sortFun(type)
            )
            this.y_data = this.data.map(item=>{return item.nickname})
            this.x_data = this.data.map(item=>{return item[type]})
            this.$nextTick(()=>{
                this.getScreenEchart();
            })
            this.sesstionData()
        },

        sortFun(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1; //升序排序
            };
        },

        // 编导柱状图表
        getScreenEchart() {
            let that = this
            const myChart = this.$echarts.init(
                document.getElementById("dirBarchart")
            );
            var option = {
                color: ["#00E0DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top:"1%",
                    left: "1%",
                    right: "5%",
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    show: false,
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "category",
                    inverse: true,
                    data: that.y_data,
                    splitLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { 
                        show: true,
                        fontSize:14,
                        color:"#fff",
                        margin:20,
                        formatter:function(item,index){
                            var text = ''
                            if(index==0){
                                text = '{red|TOP'+(index+1)+'}' + '{name|'+ item + '}';
                            }else if(index==1){
                                text = '{white|TOP'+(index+1)+'}' + '{name|'+ item + '}';
                            }else if(index==2){
                                text = '{yellow|TOP'+(index+1)+'}' + '{name|'+ item + '}';
                            }else {
                                text = '{blue|TOP'+(index+1)+'}' + '{name|'+ item + '}';
                            }
                            return text
                        },
                        rich: {
                            name:{
                                width:60,
                            },
                            red: {
                                backgroundColor: "rgba(255, 37, 37, 0.8)",
                                align:'left',
                                width:40,
                                height:16,
                                fontStyle: "italic"
                            },
                            white: {
                                backgroundColor: "rgba(255, 255, 255, 0.4)",
                                align:'left',
                                width:40,
                                height:16,
                                fontStyle: "italic"
                            },
                            yellow: {
                                backgroundColor: "rgba(244, 217, 19, 0.6)",
                                align:'left',
                                width:40,
                                height:16,
                                fontStyle: "italic"
                            },
                            blue: {
                                // backgroundColor: "rgba(0, 165, 248, 0.8)",
                                align:'left',
                                width:40,
                                fontStyle: "italic"
                            },
                        }
                    },
                    axisLine: { show: false },
                },
                series: [
                    {
                        data: that.x_data,
                        type: "bar",
                        barWidth: "50%",
                        label: {
                            show: true,
                            position: "right",
                            color: "#fff",
                            fontSize:14
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 30, 30, 0],
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // 数据缓存
        sesstionData() {
            window.sessionStorage.setItem(
                "launchVedio",this.type
            );
        },
    },
    components: {},
};
</script>


<style scoped>
.screen_box {
    width: 100%;
    height: 100%;
    background-color: #030c31;
}

.screen_head {
    height: 1rem;
    position: relative;
}
.screen_img {
    display: block;
    height: 100%;
    margin: 0 auto;
}
.cc_box {
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
}
.cc_left {
    left: 50%;
    margin-left: -4rem;
    bottom: 0.05rem;
}
.cc_right {
    right: 50%;
    margin-right: -4rem;
    bottom: 0.05rem;
}
.big_cc {
    display: block;
    width: 100%;
    height: 100%;
    animation: leftround 8s infinite linear;
}
.small_cc {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    top: 50%;
    left: 50%;
    margin-left: -0.15rem;
    margin-top: -0.15rem;
    animation: rightround 8s infinite linear;
}

@keyframes leftround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes rightround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}
.screen_content {
    margin: 0.2rem;
    padding: 0.6rem 1rem 0.3rem 1rem;
    border: 0.2rem solid transparent;
    border-image-source: url(../../assets/img/screen_box.svg);
    border-image-slice: 3% 1.1% 3% 1% fill;
}
.screen_btn{
    height: 0.6rem;
    margin-bottom: 0.2rem;
}
.screen_item{
    width: 1.76rem;
    height: 0.6rem;
    margin-right: 0.1rem;
    box-sizing: border-box;
    padding: 0 0.2rem 0 0.3rem;
    line-height: 0.58rem;
    font-size: 0.18rem;
    color: #fff;
    cursor: pointer;
}
.screen_item.active{
    background: url(../../assets/img/screen_btn.svg) no-repeat;
    background-size: 100%;
}
</style>

